<template>
  <div>
    <div class="topbox">
      <el-button type="primary" @click="isShow = true">新增</el-button>
    </div>
    <el-table :data="users" style="width: 100%" :stripe="true">
      <el-table-column type="selection" width="55" />
      <el-table-column
        prop="id"
        label="编号"
        width="80"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="username"
        label="账号"
        width="180"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="type"
        label="类型"
        width="180"
        header-align="center"
        align="center"
      >
        <template v-slot="{ row }">
          <span v-if="row.type == 1">公司员工</span>
          <span v-else-if="row.type == 2">供应商</span>
          <span v-else-if="row.type == 3">货代</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        width="180"
        header-align="center"
        align="center"
      >
        <template #default="{ row }">
          <span v-if="row.sex == 1"> 保密</span>
          <span v-else-if="row.sex == 2"> 男</span>
          <span v-else> 女</span>
        </template>
      </el-table-column>
      <el-table-column prop="role.rolename" label="用户角色" />
      <el-table-column
        label="操作"
        width="180"
        header-align="center"
        align="center"
      >
        <el-button type="primary" :icon="Edit" circle />
        <el-button type="danger" :icon="Delete" circle />
      </el-table-column>
    </el-table>
    <userSave :visible="isShow" @close="isShow = false" />
    <div>
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[5, 7, 10, 15]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup>
import { onBeforeMount, ref } from "vue";
import http from "@/utils/http2.js";
import { Delete, Edit } from "@element-plus/icons-vue";
import userSave from "./userSave.vue";
//定义总条数
const total = ref(0);
//分页大小
const pageSize = ref(5);
//当前页数
const pageNum = ref(1);
//页数
const pages = ref(0);
const size = ref("default");
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = val => {
  pageSize.value = val;
  getUsers();
};
const handleCurrentChange = val => {
  pageNum.value = val;
  getUsers();
};
//定义响应式数据
const users = ref([]);
//定义异步函数，页面加载，从后端获取数据
async function getUsers() {
  let res = await http.get("/user", {
    page: pageNum.value,
    pageSize: pageSize.value
  });
  users.value = res.list;
  total.value = res.total;
  pageNum.value = res.pageNum;
  pageSize.value = res.pageSize;
  pages.value = res.pages;
}
//监听子组件关闭事件
const isShow = ref(false);
//钩子函数
onBeforeMount(() => {
  getUsers();
});
</script>
<style scoped>
.topbox {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: #fff;
  padding-left: 20px;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
